<template>
    <div ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
function debounce(fn, delay) {
  let timerId;
  return function(...args) {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn.apply(this,args);
      timerId = null;
    }, delay);
  };
}
export default {
    name: "ECharts",
    props: {
        options: Object,
        theme: String,
    },
    data() {
        return {
            chart: null,
        };
    },
    watch: {
        options: {
            immediate: true,
            handler(){
              this.$_setOption()
            },
        },
        chart(){
          this.$_setOption()
        },
    },
    beforeDestroy() {
        this.chart && this.chart.dispose();
        this.chart = null;
    },

  mounted() {
        this.$_init();
    },
  created() {
    this.$_setOption= debounce(this.$_setOption,300)
  },
    methods: {
        $_init() {
          this.chart = echarts.init(this.$refs.chart, this.theme);
        },
      $_setOption() {
        if (this.options && this.chart) {
          this.chart.clear()
          this.chart.setOption(this.options,{
            notMerge:true
          });
        }
      }
    },
};
</script>

<style scoped></style>
